Both :nth-child() and :nth-of-type() are CSS pseudo-classes used to target elements based on their position, but they differ in what elements they count.

Differences

1
:nth-child(n) – Selects the element that is the nth child of its parent, counting all element types.
2
:nth-of-type(n) – Selects the nth element of its specific type (tag) among its siblings, ignoring other types.

Example: :nth-child() vs :nth-of-type()

In this example, :nth-child(2) selects the paragraph because it is the second child of the <ul>, whereas :nth-of-type(2) selects 'Item 2' because it is the second <li> among its siblings.

Best Practices

1
Use :nth-child() when you want to target elements by their exact position among all children.
2
Use :nth-of-type() when you want to target elements by their position among siblings of the same type.
3
Combine these pseudo-classes with other selectors for precise targeting.
4
Be cautious in complex HTML structures with mixed element types.

Difficulty: 3/10

Topics: CSS selectors, nth-child, nth-of-type

Scenario Questions

0-2 years experience

1
You're styling a list of items where every other item should have a different background, but there are occasional icons mixed in as <span> elements. You used :nth-child(2n) and it's not working right — what's going on?
2
You have a grid of cards with alternating colors, but one card is wrapped in a <div> for layout. Why does :nth-child(odd) break but :nth-of-type(odd) still works?
3
If you have three <p> tags and one <h2> in between, what does p:nth-of-type(2) target? What about p:nth-child(2)?

2-5 years experience

1
A teammate says the pricing table on our landing page has broken stripe patterns — the alternating row colors are off. You check the HTML and see dynamic content inserts a banner ad occasionally. How do you diagnose whether it's a :nth-child or :nth-of-type issue?
2
Our component library uses :nth-child(1) to style the first item differently, but now we're adding a loading skeleton that's also a <div>. The styles are leaking — how do you fix this without breaking existing usage?
3
A user reports that in the comment thread, every third reply has the wrong accent color. The HTML has replies mixed with moderator badges. What selector should you use and why?

5-8 years experience

1
You're designing a reusable table component that supports dynamic column insertion and conditional rendering. How do you ensure row styling remains consistent when some columns are hidden or loaded asynchronously, and why does choosing between :nth-child and :nth-of-type matter for maintainability?
2
Our design system has a list component that’s used across 12 products. Some products inject non-list items (like banners or CTAs) dynamically. How would you architect the CSS to avoid style leakage and ensure predictable behavior across teams?
3
You inherit a legacy UI where :nth-child is used heavily for layout, but the markup is inconsistent due to CMS-generated content. How do you refactor this without breaking existing styles or requiring massive HTML changes?

8+ years experience

1
We're migrating from a monolithic UI to a micro-frontend architecture. Different teams use different CSS frameworks, and some inject arbitrary elements into shared list containers. How do you define a cross-team CSS contract for list styling that prevents style collisions and ensures long-term maintainability?
2
Our design system is used in 50+ products with varying content models. How do you decide whether to enforce :nth-of-type as the default for list styling, or allow teams to opt into :nth-child — and what are the long-term tradeoffs in documentation, training, and debugging burden?
3
A legacy component uses :nth-child for critical visual patterns, but now we need to support server-side rendering with dynamic placeholders. How do you architect a migration path that preserves visual consistency while enabling incremental refactoring across teams?

Follow-up Questions

❓What if you have a div followed by a span and then another div — how would nth-of-type(2) behave vs nth-child(2)?
❓How would you debug a case where a style applied by nth-child isn't showing up as expected?
❓Can you think of a real UI component where using nth-of-type instead of nth-child would prevent a bug?